<template>
  <div>
    <div style="margin-top: 0.2vh">
      <h1 style="margin-left: 64vh">为什么选择我们？</h1>
      <h1 style="margin-left: 55vh">REASON：专业！效率！性价比！</h1>
      <h1 style="margin-left: 56vh">我们提供以下企业级解决方案</h1>
      <div>
        <a-row :gutter="16">
          <a-col :span="8" v-for="(v, k) in payType" :key="k">
            <a-card :title="v.title" :bordered="false" :headStyle="head">
              <a-card
                size="small"
                title="包含内容"
                style="width: 300px; margin-left: 60px"
              >
                <a-row>
                  <a-col :span="16">
                    <h4>「数据概览」</h4>
                  </a-col>
                  <a-col :span="8">
                    <a-icon type="check-circle" theme="twoTone" />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="16">
                    <h4>「基础优化方案」</h4>
                  </a-col>
                  <a-col :span="8">
                    <a-icon type="check-circle" theme="twoTone" />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="16">
                    <h4>「安全/资源风险预测」</h4>
                  </a-col>
                  <a-col :span="8">
                    <a-icon
                      :type="v.predict"
                      theme="twoTone"
                      :two-tone-color="v.predict_color"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="16">
                    <h4>「费用优化建议」</h4>
                  </a-col>
                  <a-col :span="8">
                    <a-icon
                      :type="v.fee"
                      theme="twoTone"
                      :two-tone-color="v.fee_color"
                    />
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="16">
                    <h4>「定制一对一优化方案」</h4>
                  </a-col>
                  <a-col :span="8">
                    <a-icon
                      :type="v.one"
                      theme="twoTone"
                      :two-tone-color="v.one_color"
                    />
                  </a-col>
                </a-row>
              </a-card>
              <div style="text-align: center; margin-top: 10px">
                <a-statistic
                  title="每年 (CNY)"
                  :precision="2"
                  :value="v.cost"
                />
              </div>
              <div style="text-align: right">
                <a-button type="primary" icon="alipay-circle" @click="pay(k)">
                  购买
                </a-button>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div style="background-color: white; margin-top: 10px">
        <a-comment>
          <template slot="actions">
            <span key="comment-basic-like">
              <a-tooltip title="Like">
                <a-icon
                  type="like"
                  :theme="action === 'liked' ? 'filled' : 'outlined'"
                />
              </a-tooltip>
              <span style="padding-left: '8px'; cursor: 'auto'">
                {{ likes }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="Dislike">
                <a-icon
                  type="dislike"
                  :theme="action === 'disliked' ? 'filled' : 'outlined'"
                />
              </a-tooltip>
              <span style="padding-left: '8px'; cursor: 'auto'">
                {{ dislikes }}
              </span>
            </span>
            <span key="comment-basic-reply-to">Reply to</span>
          </template>
          <a slot="author">Han Solo</a>
          <a-avatar
            slot="avatar"
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            alt="Han Solo"
          />
          <p slot="content">
            云集成平台改变了大众对于云服务的基本认知，重组集成了各平台的服务器。这无疑是一种突破，而目前的管理解决方案适用于大部分企业的需求，是企业管理优化服务器的不二之选！
          </p>
          <a-tooltip
            slot="datetime"
            :title="moment().format('YYYY-MM-DD HH:mm:ss')"
          >
            <span>{{ moment().fromNow() }}</span>
          </a-tooltip>
        </a-comment>
      </div>
      <a-modal
        v-model="visible"
        title="购买结果"
        @ok="confirmPay"
        okText="确认"
        cancelText="关闭"
      >
        <a-result
          status="success"
          title="成功购买服务！感谢您的支持"
          sub-title="您的订单号：xxxxxxxxxxx"
        >
          <template #extra>
            <a-button key="console" type="primary" @click="confirmPay">
              控制台
            </a-button>
            <a-button key="buy"> 升级方案 </a-button>
          </template>
        </a-result>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      likes: 100,
      dislikes: 8,
      action: null,
      moment,
      head: {
        style: 'text-align: center',
      },
      visible: false,
      payType: [
        {
          title: '基础解决方案',
          predict: 'close-circle',
          predict_color: '#eb2f96',
          fee: 'close-circle',
          fee_color: '#eb2f96',
          one: 'close-circle',
          one_color: '#eb2f96',
          cost: 19099,
        },
        {
          title: '进阶解决方案',
          predict: 'check-circle',
          predict_color: '',
          fee: 'check-circle',
          fee_color: '',
          one: 'close-circle',
          one_color: '#eb2f96',
          cost: 21099,
        },
        {
          title: '高级解决方案',
          predict: 'check-circle',
          predict_color: '',
          fee: 'check-circle',
          fee_color: '',
          one: 'check-circle',
          one_color: '',
          cost: 23099,
        },
      ],
    }
  },
  methods: {
    pay(e) {
      console.log(e)
      this.visible = true
    },
    confirmPay() {
      this.$emit('isPay')
      this.visible = false
    },
  },
}
</script>

<style scoped></style>
